<template>

  <!--
  <div class="d-flex flex-grow align-self-center lh-13" :class="odds.isBetOne ? 'sg' : 'bt-l bl-l'">
    <div class="g box-xl py-1" :class="on(bet(3))" @click="select(bet(3))">
      <div :class="{'text-red': m.hostHot}" v-html="name('host')"></div>
      <small class="text-grey">主胜{{odds.win}}</small>
    </div>
    <div class="g grow py-1" :class="on(bet(1))" @click="select(bet(1))">
      <div>VS</div>
      <small class="text-grey">平{{odds.flat}}</small>
    </div>
    <div class="g box-xl py-1" :class="on(bet(0))" @click="select(bet(0))">
      <div :class="{'text-red': m.gusetHot}" v-html="name('guest')"></div>
      <small class="text-grey">客胜{{odds.lose}}</small>
    </div>
  </div>
  -->

  <div class="d-flex flex-grow text-center bg-white">
    <div class="box-xl" @click="select(bet(3))">
      <b class="text-truncate" :class="{'text-red': m.hostHot}" v-html="name('host')"></b>
      <div class="g py-2 mt-1 bl-l bt-l" :class="on(bet(3))">主胜 <small>{{odds.win}}</small></div>
    </div>
    <div class="box-xl" @click="select(bet(1))">
      <small class="text-grey">VS</small>
      <div class="g py-2 mt-1 bt-l" :class="on(bet(1))">平 <small>{{odds.flat}}</small></div>
    </div>
    <div class="box-xl" @click="select(bet(0))">
      <b class="text-truncate" :class="{'text-red': m.guestHot}" v-html="name('guest')"></b>
      <div class="g py-2 mt-1 bt-l" :class="on(bet(0))">客胜 <small>{{odds.lose}}</small></div>
    </div>
  </div>

</template>

<script>
import { mapping, mixin } from './calculator'
import { sign } from '../../utils/filters'

var bet = {
  rqspf: {3: '让球胜', 1: '让球平', 0: '让球负'},
  spf: {3: '胜', 1: '平', 0: '负'}
}

export default {
  name: 'cart-spf',
  mixins: [mixin],
  props: ['rule'],
  computed: {
    odds () {
      return mapping(this.m, this.rule)
    }
  },
  methods: {
    name (team) {
      var prop = team + 'Short'
      var name = this.m[prop]
      if (this.rule == 'rqspf' && team == 'host') {
        var n = this.m['hhad'].fixed
        name += `<b class="text-${this.color(n)}">(${sign(n)})</b>`
      }
      return name + ''
    },
    bet (r) {
      return this.rule + '|' + bet[this.rule][r]
    }
  }
}
</script>
